<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>iLEADER</title>
  <link rel="stylesheet" href="../dist/lib/layui/css/layui.css">
  <link rel="stylesheet" href="../dist/css/main.css">
</head>
<body>
<div class="layui-form-item">
  <label class="layui-form-label">头像</label>
  <div class="layui-input-inline">
    <input type="text" name="head" lay-verify="required" id="inputimgurl" placeholder="图片地址" value="123.jpg" class="layui-input">
  </div>
  <div class="layui-input-inline">
    <div class="layui-upload-list" style="margin:0">
      <img src="123.jpg" id="srcimgurl" class="layui-upload-img">
    </div>
  </div>
  <div class="layui-input-inline layui-btn-container" style="width: auto;">
    <button class="layui-btn layui-btn-primary" id="editimg">修改图片</button >
  </div>
  <div class="layui-form-mid layui-word-aux">头像的尺寸限定150x150px,大小在50kb以内</div>
</div>
<script src="../dist/lib/jquery.min.js"></script>
<script src="../dist/lib/layui/layui.js"></script>
<script>
  layui.config({
    base: '../dist/lib/cropper/' //layui自定义layui组件目录
  }).use(['form','croppers'], function () {
    var $ = layui.jquery
      ,form = layui.form
      ,croppers = layui.croppers
      ,layer= layui.layer;

    //创建一个头像上传组件
    croppers.render({
      elem: '#editimg'
      ,saveW:150     //保存宽度
      ,saveH:150
      ,mark:1/1    //选取比例
      ,area:'900px'  //弹窗宽度
      ,url: "upload/uploadImg"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
      ,done: function(url){ //上传完毕回调
        $("#inputimgurl").val(url);
        $("#srcimgurl").attr('src',url);
      }
    });
  });
</script>
</body>
</html>